<style lang="scss" scoped>
    .schoolwork_show{
        min-height: calc(100vh - 90px);
        background-color: #FAFCFC;
        background-image:url('~@/assets/student-bg.jpg');
        background-repeat: no-repeat;
        background-position-y: bottom;
        background-size: 100%;
        position: relative;
        .go_center{
            position: absolute;
            right: 10px;
            top: 20px;
        }
    }

 
    .step li{
        color: #fff;
        background:$sub-color;
        width:24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        &.success{
            background:$success-color;
        }
        &.error{
            background:$error-color;
        }
        &.skip{
            background:$warning-color;
        }
        &.active::after{
            position: absolute;
            content: "";
            width: 16px;
            height: 16px;
            background: url('~@/assets/current.png') no-repeat;
            background-size: contain;
            bottom: -14px;
            left: 0;right: 0;
            margin: auto;
        }
    }
    .step .tips{
        color: #999;
        font-size: 12px;
        li{
            width: 8px;
            height: 8px;
            margin-right: 3px;
            line-height: 26px;
        }
    }
    .t1_tips{
        position: relative;
        &::after{
            content: '';
            width: 16px;
            height: 16px;
            background: url('~@/assets/success.png') no-repeat;
            background-size: cover;
            position: absolute;
            bottom: -24px;
            left: 0;right: 0;
            margin: auto;
        }
    }
    .t2_tips{
        position: relative;
        &::after{
            content: attr(answer);
            position: absolute;
            bottom: -24px;
            left: -20px;
            padding-left: 20px;
            background: url('~@/assets/success.png') no-repeat;
            background-size: 16px 16px;
        }
    }
    .t3_tips{
        position: relative;
        &::after{
            content: '';
            width: 16px;
            height: 16px;
            background: url('~@/assets/success.png') no-repeat;
            background-size: cover;
            position: absolute;
            top:0;bottom: 0;
            left: -24px;
            margin: auto;
        }
    }
</style>
<template>
    <div class="schoolwork_show py-2 border-radius">
        <Button class="go_center" @click="go_center">返回个人中心</Button>
        <div v-if="!~currentIndex">
            <h4 class="block-title">{{content.title}}</h4>
            <div class="mt-1 p-2">
                <div class="desp w-100b" style="word-break:break-all" v-html="content.content"></div>
                <div class="mt-2" v-if="content.file_list.length">
                    <span class="mr-1"> 附件列表：</span>
                    <download-list :file_list="content.file_list"/>
                </div>
                <div class="mt-4">
                    <Button @click="getAll_problems" type="primary" size="large">查看题目</Button>
                </div>
            </div>
        </div>
        <div class="problems" v-else>
            <div class="d-flex line-height-26">
                <h4 class="block-title t1 mr-1">No.{{currentIndex+1+' '+currentProblems.typeName}}题 ({{currentProblems.score}}分)</h4>
                <span class="color-666 mr-2">题目编号：{{currentProblems.no}}</span>
                <span class="color-red" v-if="currentProblems.limit_time">限时{{currentProblems.limit_time}}分钟</span>
            </div>
            <div class="t1" v-if="currentProblems.type===1">
                <div class="details p-1">
                    <p class="my-2">{{currentProblems.title}}</p>
                    <RadioGroup v-model="currentAnswer" >
                        <Radio :class="{t1_tips:'1'==originAnswer}" :disabled="true" border label="1">正确</Radio>
                        <Radio :class="{t1_tips:'2'==originAnswer}" :disabled="true" border label="2">错误</Radio>
                    </RadioGroup>
                </div>
            </div>
            <div class="t2" v-if="currentProblems.type===2">
                <div class="details p-1">
                    <div class="my-2">
                        <span v-for="(val,index) in currentProblems.title" :key="index">
                            {{val}}
                            <Input :answer="originAnswer[index]" :disabled="true" class="w-100 mx-1 t2_tips" v-model="currentAnswer[index]" v-if="index!==currentProblems.title.length-1"></Input>
                        </span>
                    </div>
                </div>
            </div>
            <div class="t3" v-if="currentProblems.type===3">
                <div class="details p-1 pl-3">
                    <p class="my-2">{{currentProblems.title}}</p>
                    <RadioGroup vertical v-if="currentProblems.typeName==='单选'" v-model="currentAnswer">
                        <Radio :class="{t3_tips:val.index==originAnswer}" :disabled="true" :label="val.index" v-for="val in currentProblems.option" :key="val.index">{{val.index+'：'+val.text}}</Radio>
                    </RadioGroup>
                    <CheckboxGroup v-else v-model="currentAnswer" >
                        <Checkbox :class="{t3_tips:originAnswer.includes(val.index)}" :disabled="true" class="d-block mb-1" :label="val.index" v-for="val in currentProblems.option" :key="val.index">{{val.text}}</Checkbox>
                    </CheckboxGroup>
                </div>
            </div>
            <div class="t4" v-if="currentProblems.type===4">
                <div class="details p-1">
                    <p class="my-2">{{currentProblems.title}}</p>
                    <p class="my-2">
                        得分关键词：<span class="mr-2">{{originAnswer}}</span>
                        本题得分：<b class="color-t3">{{currentProblems.answer.score}}分</b>
                    </p>
                    <Input type="textarea" style="width:700px" :disabled="true" v-model="currentAnswer" :autosize="{minRows: 5}" placeholder="请输入答题内容" />
                </div>
            </div>
        
            <div class="my-2 p-1" v-if="currentProblems.file_list.length">
                <span class="mr-1"> 附件列表：</span>
                <download-list :file_list="currentProblems.file_list"/>
            </div>
            <div class="my-2 ml-1">
                <Button type="primary" @click="next_problems()">下一题</Button>
            </div>
            <div class="step mt-2 p-1">
                <ul class="d-flex">
                    <li class="mr-2" @click="next_problems(index)" v-for="(val,index) in this.questions_list" :key="index" :class="[{active:index===currentIndex},['skip','error','success',''][val.right+1]]" >{{index+1}}</li>
                </ul>
            </div>
            <p class="pl-1 line-height-26 font-12 color-999">点击序号跳转至指定题目</p>
            <div class="step px-1">
                <ul class="d-flex tips">
                    <div class="mr-1">
                        <li class="success"></li>表示正确
                    </div>
                    <div class="mr-1">
                        <li class="error"></li>表示错误
                    </div>
                    <div class="mr-1">
                        <li class="skip"></li>表示跳过
                    </div>
                </ul>
            </div>
        </div>
 
    </div>
</template>
<script>
    import {deep_clone} from "@/common/tool"
    import {exam_questions,enter_lesson} from "@/common/sapi"
    export default {
        data(){
            return {
                typeNames:["判断",'填空/计算','选择','论述'],
                content:{
                    file_list:[]
                },
                currentIndex:-1,
                currentProblems:{
                    type:1,
                    typeName:''
                },
                currentAnswer:null,
                originAnswer:null
            }
        },
        methods:{
            process(val){
                val.typeName=this.typeNames[val.type-1]
                if(val.type===2)
                    val.title=val.title.split('(####)')
                if(val.type===3){
                    val.typeName=val.origin_answer.includes(',')?'多选':'单选'
                }
                this.currentProblems=val
            },
            next_problems(index=-1){
                if(~index && index<this.questions_list.length){
                    this.currentIndex=index
                }
                else if(index===-1 && this.currentIndex<this.questions_list.length-1){
                    this.currentIndex++
                }else{
                    this.$Modal.info({
                        title: '提示',
                        content: '已经是最后一题了'
                    });
                    return
                }
                this.process(deep_clone(this.questions_list[this.currentIndex]))
            },
            getAll_problems(){
                exam_questions({lid:this.content.id})
                .then(res=>{
                    if(res){
                        this.questions_list=res.data.question.map(el=>{
                            el.right=el.answer.right
                            return el
                        })
                        this.next_problems()
                    }
                })
            },
            go_center(){
                 this.$Modal.confirm({
                    title: '确认',
                    content: `确认返回个人中心？`,
                    onOk: () => {
                        this.$router.push('center')
                    }
                });
            }
          
        },
        watch:{
            currentIndex(){
                const type=this.currentProblems.type
                if(type===1){
                    this.currentAnswer=this.currentProblems.answer.content
                    this.originAnswer=this.currentProblems.origin_answer
                }
                else if(type===2){
                    this.currentAnswer=this.currentProblems.answer.content.split(',')
                    this.originAnswer=this.currentProblems.origin_answer.split(',')
                }
                else if(type===3){
                    if(this.currentProblems.typeName==='单选'){
                        this.currentAnswer=this.currentProblems.answer.content
                        this.originAnswer=this.currentProblems.origin_answer
                    }
                    else{
                        this.currentAnswer=this.currentProblems.answer.content.split(',')
                        this.originAnswer=this.currentProblems.origin_answer.split(',')
                    }
                }
                else{
                    this.originAnswer=this.currentProblems.origin_answer
                    this.currentAnswer=this.currentProblems.answer.content
                }
            }
        },
        beforeDestroy(){
            //发送销毁http服务
            this.$ipcRenderer.removeAllListeners(['active_topic_reply'])
        },
        created(){
            enter_lesson({lid:this.$route.query.lid})
            .then(res=>{
                if(res){
                    this.content=res.data.info
                }
            })
            this.$ipcRenderer.send('active_topic')
        },
        mounted(){
            this.$ipcRenderer.on('active_topic_reply',(event,data)=>{
                const index=this.questions_list.findIndex(el=>el.no==data)
                if(~index){
                    this.next_problems(index)
                    this.$ipcRenderer.send('focus_main')
                }
            })
        }
    }
</script>